<template>
  <div>
    <page-list :x-uri="uri" :custom-components="custom" :doactions="doactions">
      <!-- 页面操作按钮 -->
      <template v-slot:page-button>
        <el-button size="mini" type="primary" @click="setCertConfig">证书配置</el-button>
      </template>
      <!-- 自定义tab -->
      <template v-slot:page-tabs>
        <edu-page-tabs :tab-list="tabs" />
        <page-header :content="headerTitle" />
      </template>
    </page-list>
    <el-dialog v-if="printVisible" title="证书打印" :visible.sync="printVisible" width="860px" top="4vh" :close-on-click-modal="false">
      <print-page :cert="cert" :direction="direction" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="change">横纵切换</el-button>
        <el-button v-print="printObj" type="primary" size="small">打印</el-button>
      </span>
    </el-dialog>
    <el-dialog v-if="certConfigVisible" title="获取证书配置" :visible.sync="certConfigVisible" width="500px" :close-on-click-modal="false">
      <el-form ref="cert-config" v-loading="loadingCertConfig" :model="certConfig" size="small">
        <el-form-item label="是否颁发证书">
          <el-tooltip effect="dark" content="关闭后将不再给学员生成证书" placement="right">
            <el-switch
              v-model="certConfig.has_cert"
              :active-value="1"
              :inactive-value="0"
            />
          </el-tooltip>
        </el-form-item>
        <el-form-item label="课程完结检测">
          <el-tooltip effect="dark" content="课程必须完结才能颁发证书" placement="right">
            <el-switch
              v-model="certConfig.course_is_finished"
              :active-value="1"
              :inactive-value="0"
            />
          </el-tooltip>
        </el-form-item>
        <el-form-item label="获取条件">
          <el-checkbox-group v-model="certConfig.condition">
            <el-tooltip effect="dark" content="学完所有课程即可获得证书" placement="bottom">
              <el-checkbox label="1">学完课程</el-checkbox>
            </el-tooltip>
            <el-tooltip effect="dark" content="考试通过课程中绑定的所有试卷后获得证书" placement="bottom">
              <div slot="content">1、通过课程关联的全部考试后可获得证书<br>2、如果已经在公开考试中参加过相应考试并符合通过条件，在课程中会认定该考试已通过</div>
              <el-checkbox label="2">通过考试</el-checkbox>
            </el-tooltip>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-row type="flex" justify="end">
            <el-button @click="certConfigVisible = false">取消</el-button>
            <el-button type="primary" @click="onSubmitCertConfig">保存</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import PageList from '@public/template/page_list.vue';
import PrintPage from './components/print.vue';
import User from '@/pages/user/student/account/components/user.vue';
import Vue from 'vue';
import Print from 'vue-print-nb';
import EduPageTabs from '@public/template/tabs/page_tabs.vue';
import PageHeader from '@/components/page-header';
Vue.use(Print);
export default {
  components: {
    PageList,
    PrintPage,
    EduPageTabs,
    PageHeader
  },
  inject: ['reload'],
  data() {
    return {
      uri: '/course/admin/cert/' + this.$route.params.id + '/course/student',
      headerTitle: '证书',
      tabs: [
        {
          title: '学员证书',
          uri: '/course/cert/' + this.$route.params.id + '/student',
          meta: {
            permission: 'course.cert'
          }
        }
      ],
      doactions: [{ title: '证书下载', meta: { permission: 'course.cert' }, callback: this.printCert }],
      printVisible: false,
      printObj: {
        id: 'print',
        popTitle: '证书打印'
      },
      custom: {
        user: User
      },
      cert: {
        cert_info: {},
        course_list: []
      },
      direction: 'vertical',
      certConfigVisible: false,
      certConfig: {
        has_cert: 0,
        course_is_finished: 0,
        condition: []
      },
      loadingCertConfig: true
    };
  },
  computed: {
    courseId() {
      return this.$route.params.id;
    }
  },
  methods: {
    printCert: function({ row }) {
      // 获取证书信息
      this.$http.get(
        '/course/admin/cert/print',
        {
          id: row.id,
          user_id: row.user_id,
          course_id: row.course_id
        },
        response => {
          this.cert = response.data;
          this.printVisible = true;
        },
        _ => {
          this.$message.error('获取证书信息失败');
        }
      );
    },
    change: function() {
      this.direction = this.direction == 'vertical' ? 'horizontal' : 'vertical';
    },
    // 证书配置
    setCertConfig() {
      this.certConfigVisible = true;
      this.loadingCertConfig = true;
      // 获取当前课程的证书配置
      this.$http.get('/course/admin/cert/' + this.courseId + '/config', {}, ({ data }) => {
        const {
          condition = [],
          has_cert: hasCert = 0,
          course_is_finished: courseIsFinished = 0
        } = data
        this.certConfig = {
          condition,
          has_cert: hasCert,
          course_is_finished: courseIsFinished
        }
        this.loadingCertConfig = false;
      }, _ => {}, false)
    },
    // 提交证书配置
    onSubmitCertConfig() {
      if (this.certConfig.condition.length == 0) {
        this.$message.error('获取条件至少需要选择一项');
        return false;
      }
      this.loadingCertConfig = true;
      this.$http.post('/course/admin/cert/' + this.courseId + '/config', this.certConfig, _ => {
        this.loadingCertConfig = false;
        this.certConfigVisible = false;
      }, error => {
        this.$message.error(error.msg);
        this.loadingCertConfig = false;
      })
    }
  }
};
</script>
<style>
@media print {
  body {
    -webkit-print-color-adjust: exact;
    -moz-print-color-adjust: exact;
    -ms-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  button {
    display: none;
  }
}
</style>
